<script setup lang="ts">
import { onMounted, ref, useTemplateRef } from 'vue'
import mp3 from '../../assets/media/music.mp3'

const audioRef = useTemplateRef<HTMLAudioElement>('audio')
const play = ref(false)
const props = defineProps<{
  root: boolean
}>()
//音频准备就绪开始播放
const handleStartPlay = () => {
  if (audioRef.value) {
    play.value = !audioRef.value.paused
  }
}
//播放
const handlePlay = () => {
  play.value = true
  if (audioRef.value) {
    audioRef.value.play()
  }
}
//暂停
const handlePause = () => {
  play.value = false
  if (audioRef.value) {
    audioRef.value.pause()
  }
}

onMounted(() => {
  handleStartPlay()
})
</script>

<template>
  <div
    class="fixed rounded-[50%] transition-all duration-1000 shadow-[0_0_100px_rgba(0,0,0,0.25)]"
    :class="
      props.root
        ? 'sm:w-[350px] sm:h-[350px] max-sm:w-[50vw] max-sm:h-[50vw] top-[10vh] left-[50%] translate-x-[-50%] animate-enterActive'
        : 'sm:right-[55px] max-sm:right-[30px] bottom-[10%] z-9999 sm:w-[100px] sm:h-[100px] max-sm:w-[14vw] max-sm:h-[14vw]'
    "
  >
    <div
      class="absolute inset-0 size-full rounded-[50%] bg-white border-2 border-black/10 animate-rotate after:absolute after:top-0 after:left-0 after:size-full after:rounded-[50%] after:border-[1px] after:border-[#b599b4] after:opacity-0 after:animate-ripple2 before:absolute before:top-0 before:left-0 before:size-full before:rounded-[50%] before:border-[1px] before:border-[#b599b4] before:opacity-0 before:animate-ripple"
      :class="{ ripple: play }"
    >
      <img
        class="block size-full rounded-[50%]"
        src="http://p1.music.126.net/DSTg1dR7yKsyGq4IK3NL8A==/109951163046050093.jpg?param=300x300"
        alt=""
      />
      <audio ref="audio" @canplay="handleStartPlay" :src="mp3" loop>
        您的浏览器不支持 audio 标签。
      </audio>
    </div>
    <div
      class="absolute left-0 top-0 size-full rounded-[50%] flex justify-center items-center bg-black/60"
    >
      <i
        :class="
          props.root ? 'sm:text-[55px]! max-sm:text-[10vw]!' : 'sm:text-[35px]! max-sm:text-[4vw]!'
        "
        class="sx-icon-zanting cursor-pointer"
        v-if="play"
        style="color: #ffffff"
        @click="handlePause"
      ></i>
      <i
        :class="
          props.root ? 'sm:text-[55px]! max-sm:text-[10vw]!' : 'sm:text-[35px]! max-sm:text-[4vw]!'
        "
        class="sx-icon-video cursor-pointer"
        v-else
        style="color: #ffffff"
        @click="handlePlay"
      ></i>
    </div>
  </div>
</template>

<style scoped lang="css">
.ripple {
  animation-play-state: running;

  &::before {
    content: '';
    animation-play-state: running;
  }

  &::after {
    content: '';
    animation-play-state: running;
  }
}
</style>
